﻿
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
			<a class="bui-btn btn-back"><i class="icon-back"></i></a>
		</div>
		<div class="bui-bar-main">头部</div>
		<div class="bui-bar-right">
			<a class="bui-btn">菜单</a>
		</div>
	</header>
	<main>
		
		<h3 class="section-title">居中对齐</h3>
		<header class="bui-bar">
			<div class="bui-bar-left bui-bar-text">
				<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i>返回</a>
			</div>
			<div class="bui-bar-main">列表</div>
			<div class="bui-bar-right bui-bar-text">
				<a class="bui-btn-inline" ><i class="icon-menu"></i></a>
			</div>
		</header>

		<h3 class="section-title">左边对齐</h3>
		<header class="bui-bar bui-bar-side">
			<div class="bui-bar-left">
				<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
			</div>
			<div class="bui-bar-main">列表</div>
			<div class="bui-bar-right">
				<a class="bui-btn" ><i class="icon-search"></i></a>
				<a class="bui-btn" ><i class="icon-menu"></i></a>
			</div>
		</header>
    <h3 class="section-title">中间下拉菜单</h3>
    <header class="bui-bar">
      <div class="bui-bar-left" style="overflow:visible;">
        <!-- 不修改文本值 -->
        <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
      </div>
      <div class="bui-bar-main">
        
        <!-- 不修改文本值 -->
        <div id="barMain" class="bui-dropdown bui-arrow-center">
          <div class="bui-btn">
            <span class="span1">下拉菜单</span>
            <i class="icon-dropdown"></i>
          </div>
          <ul class="bui-list round">
            <!-- 默认激活第一个 -->
            <li class="bui-btn" value="11">
              列表1
            </li>
            <li class="bui-btn" value="22">
              列表2
            </li>
          </ul>
        </div>
      </div>

      <!-- 这个样式要设置才会看到二级菜单 -->
      <div class="bui-bar-right">
        <a class="bui-btn" onclick="bui.back();"><i class="icon-refresh"></i></a>
      </div>
    </header>
    <h3 class="section-title">右边下拉菜单</h3>

    <header class="bui-bar">
      <div class="bui-bar-left" style="overflow:visible;">
        <!-- 不修改文本值 -->
        <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
      </div>
      <div class="bui-bar-main">
        右边下拉菜单
      </div>

      <!-- 这个样式要设置才会看到二级菜单 -->
      <div class="bui-bar-right" style="overflow:visible;">
        <!-- 不修改文本值 -->
        <div id="barRight" class="bui-dropdown" change="false">
          <div class="bui-btn bui-box-center">
            <i class="icon-dropdown"></i>
          </div>
          <ul class="bui-list round">
            <!-- 默认激活第一个 -->
            <li class="bui-btn" value="11">
              列表1
            </li>
            <li class="bui-btn" value="22">
              列表2
            </li>
          </ul>
        </div>
      </div>
    </header>
	</main>
</div>
	